<template>
    <div class="feed_dataf">
        <div class="now_header">
            <div style="width: 28px;display: inline-block" @click = goHome>
                <img style="width: 100%" src="../assets/img/homepage.png">
            </div>
            <div style="width: 28px;display: inline-block;float: right" @click = showFDRecord>
                <img style="width: 100%" src="../assets/img/plus2.png">
            </div>
            <div  v-show="common.show" >
                <el-card class="box-card">
                    <el-form label-position = "right"
                             ref="fdForms"
                             :model="feedData" :rules="fdRules"
                    >
                        <el-form-item label="时间" prop="feedTime">
                            <el-date-picker
                                    v-model="feedData.feedTime"
                                    type="datetime"
                                    placeholder="时间"
                                    :editable = false
                                    value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                        <el-form-item label="容量" prop="feedCapacity">
                            <el-input placeholder="多少毫升" v-model="feedData.feedCapacity"  />
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="onSubmit" :loading="common.loading">Create</el-button>
                    <el-button @click = closeFDRecord>Cancel</el-button>
                </el-card>
            </div>
        </div>
        <van-pull-refresh v-model="common.refresh" @refresh="onRefresh" >
        <div style="margin-top: 50px"  v-infinite-scroll="moreFAData"  :infinite-scroll-immediate =false	>
            <div style="height: 100px" v-show="fdRecords.feedData.length == 0"></div>
            <div  v-for="key in fdRecords.feedData" class="show-box">
                <el-card class="box-card">
                    <template #header>
                        <el-row>
                            <el-col :span="12">  <div style="text-align: left">{{ key.feedDataAll.feedDate}}</div></el-col>
                            <el-col :span="12">  <div  style="text-align: right">{{ key.feedDataAll.feedCapacityAll}}毫升</div></el-col>
                        </el-row>
                    </template>
                    <div v-for="o in key.feedDataList" :key="o" class="card-text-a">
                        <el-row>
                            <el-col :span="12">  <div style="text-align: left">{{ o.feedTime}}</div></el-col>
                            <el-col :span="12">  <div  style="text-align: right">{{o.feedCapacity}}毫升</div></el-col>
                        </el-row>
                    </div>
                </el-card>
            </div>
        </div>
        <el-divider><span style="color:#9e9e9e">end</span></el-divider>
        <div style="height: 200px" v-show="fdRecords.feedData.length == 0"></div>
        </van-pull-refresh>
    </div>

</template>

<script setup>
import {get_user} from  "@/axios/login";
import {getCurrentInstance, onMounted, reactive, ref, unref} from "vue";
import {useRouter,useRoute} from 'vue-router'
import {get_feed, commit_feed} from  "@/axios/feedData";
import {whole_init} from "@/util/Permission";

const fdForms = ref(null);

const fdRules = {
    feedTime:[{ required: true, message: '不能为空', trigger: 'blur'}],
    feedCapacity: [{ required: true, message: '不能为空', trigger: 'blur'}]
}

const router = useRouter();

const  goHome =() =>{
    router.push("/")
}
const feedData = reactive({
    feedTime:'',
    feedCapacity:""
})

const onSubmit = (e) => {
    common.loading = true
    unref(fdForms).validate((valid) => {
        if (valid) {
            commit_feed(feedData).then(res=>{
                get_feed({"size":common.size}).then(res=>{
                    fdRecords.feedData = res.data.data.records
                    common.pages = res.data.data.pages
                    common.current = res.data.data.current
                })
                common.show = false
            })
            common.loading = false
        }else {
            common.loading = false
        }
    })
}


const fdRecords = reactive({
    feedData : []
})

const onRefresh = () => {

    get_feed({"size":common.size}).then(res=>{
        fdRecords.feedData = res.data.data.records
        common.pages = res.data.data.pages
        common.current = res.data.data.current
        common.refresh = false
    }).catch(err=>{
        common.refresh = false
    })
};


const common = reactive({
    show:false,
    loading : false,
    size: 10,
    current:1,
    pages:0,
    refresh:false
})

onMounted(() => {
    get_user().then(res=>{
        if(!whole_init(res.data.data.authorities).fd){
            router.push("/")
        }else {
            get_feed({"size":common.size}).then(res=>{
                fdRecords.feedData = res.data.data.records
                common.pages = res.data.data.pages
                common.current = res.data.data.current
            }).catch(err=>{

            })
        }
    }).catch(err=>{

    })

    document.getElementsByClassName("el-divider__text")[0].style.backgroundColor = "#ECECEC"
})


const moreFAData = ()=>{
    if(common.current >= common.pages ){
        return
    }
    get_feed({"current": common.current + 1, "size":common.size}).then(res=>{
        fdRecords.feedData = fdRecords.feedData.concat(res.data.data.records)
        common.current = res.data.data.current
    }).catch(err=>{

    })
}

const showFDRecord =() =>{
    common.show = true
}
const closeFDRecord =() =>{
    common.show = false
}
</script>

<style scoped>

.now_header{
    position: fixed;
    width: 100%;
    z-index: 100;
    background-color: #5195FF;
    color:white;
    text-align: left;
    top: 0;
    left: 0;
    padding: 4px;
    box-sizing:border-box;
}
.card-text-a{
    font-size: 14px;
}



</style>